import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

/**
 *
 * 头部组件
 * 提供 (
 *  Active 选中的菜单
 *  TopList 菜单列表
 *  Submenu 双向通信
 * )
 *
 */

@Component
class Top extends Vue {

  @Prop() public topActive?: string; // 当前选中的菜单

  @Prop() public topList: any; // 菜单列表

  public render(h: any): any {
    return (
      <el-header class='top'>
        <div class='logo'>logo</div>
        <div class='topMenu'>
          <el-menu default-active={this.topActive} class='el-menu-demo' mode='horizontal'>
            {
              this.topList.map((v: any) => (
                <el-menu-item index={v.id} on-click={() => this.SubMenu(v)}>{v.name}</el-menu-item>
              ))
            }
          </el-menu>
          <div class='userinfo'>
            212222
          </div>
        </div>
      </el-header>
    );
  }

  @Watch('topList') // 检查 TopList 变量的变化
  public WatchTopList(val: any, old: any): void {
    const active = this.topActive; // 当前选择菜单
    const ActiveMenu = this.topList.find((v: any): any => {
      return v.id = active; // 检查当前选择的菜单
    });
    this.SubMenu(ActiveMenu); // 设置子菜单
  }

  // 设置子级菜单
  public SubMenu(Menu: any): void {
    this.$emit('submenu', Menu.children === undefined ? [] : Menu.children);
  }

}
export default Top;
